<template>
	<div class="learn">
		<div class="back">
			<router-link to="/home" class="ready">返回首页</router-link>
		</div>
		<h1>网站内容持续更新...</h1>
		<div class="tabs">
			<el-tabs :tab-position="tabPosition"  class="demo-tabs">
				<el-tab-pane :label="pro.titleName" v-for="(pro,index) in project" :key="index">
					<div class="project">
						<h2 class="titleName">{{pro.titleName}}</h2>
						<div v-for="(con,index) in pro.content" :key="index" class="content">
							<div class="subtitle">{{con.subtitle}}</div>
							<div v-for="(res,index) in con.resource" :key="index" class="resource">
								<a :href="res.proLink" target="_blank" class="proName">
									{{res.proName}}
								</a>
								<span class="proDesc">
									{{res.proDesc}}
								</span>
							</div>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
	
</template>

<script>
	let project = [
		{
			// 目录名称
			titleName:"大厂开源",
			// 内容
			content:[
				{
					subtitle:"百度开源",
					resource:[
						{
							proName:"ECharts",
							proDesc:"ECharts 是国内应用最广泛的前端可视化生成工具，像素级的渲染效果使得绘制的图像几近完美",
							proLink:"https://echarts.apache.org/zh/index.html"
						},
						{
							proName:"PaddleHub ",
							proDesc:" 一个深度学习模型开发工具，它提供了很多训练好的人工智能算法模型.",
							proLink:"https://github.com/PaddlePaddle/PaddleHub"
						},
						{
							proName:"nodePPT  ",
							proDesc:"迄今为止最好的网页版 PPT，基于 markdown 语法编写。",
							proLink:"https://github.com/ksky521/nodePPT"
						},
						{
							proName:"magic",
							proDesc:"Magic 是一个轻量级 UI 组件，具有性能高效、代码量小等优势。",
							proLink:"https://www.minimamente.com/project/magic/"
						}
					]
				},
				{
					subtitle:"腾讯开源",
					resource:[
						{
							proName:"APIJSON",
							proDesc:"APIJSON 是一种专为 API 而生的 JSON 网络传输协议以及基于这套协议实现的 ORM 库。",
							proLink:"https://github.com/Tencent/APIJSON"
						},
						{
							proName:"wepy",
							proDesc:"WePY 是一款让小程序支持组件化开发的框架，类似于 Vue 开发风格，它可以很方便的让开发者选择自己喜欢的开发风格去开发小程序。",
							proLink:"https://github.com/Tencent/wepy"
						},
						{
							proName:"kbone",
							proDesc:"kbone 实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。",
							proLink:"https://github.com/ksky521/nodePPT"
						},
						{
							proName:"Hippy",
							proDesc:"是一个跨端开发框架，开发者只写一套代码就直接运行于三个平台（iOS、Android 和 Web）。",
							proLink:"https://github.com/Tencent/Hippy"
						},
						
					]
				},
				{
					subtitle:"阿里开源",
					resource:[
						{
							proName:"Arthas",
							proDesc:"Arthas 是阿里巴巴开源的 Java 诊断工具，深受开发者喜爱。",
							proLink:"https://github.com/alibaba/arthas"
						},
						{
							proName:"Druid",
							proDesc:"Druid 是一款强大的数据库连接池。",
							proLink:"https://github.com/alibaba/druid"
						},
						{
							proName:"ant-design",
							proDesc:"蚂蚁金服开源的一套企业级的前端设计语言和基于 React 的前端框架实现。",
							proLink:"https://github.com/ant-design/ant-design"
						},
						{
							proName:"nginx-book",
							proDesc:"Nginx 开发从入门到精通。",
							proLink:"https://github.com/taobao/nginx-book"
						},
						{
							proName:"umi",
							proDesc:"基于 React 的前端框架 。",
							proLink:"https://github.com/umijs/umi"
						},
						{
							proName:"dawn",
							proDesc:"前端构建和工程化工具，简化并统一了开发人员的日常构建与开发相关的工作。",
							proLink:"https://alibaba.github.io/dawn/"
						},
						{
							proName:"Ant UX",
							proDesc:"页面逻辑原型 ,可以用它来绘制页面与页面之间的逻辑图。",
							proLink:"https://ux.ant.design/"
						},
						{
							proName:"G3D",
							proDesc:"一个基于 WebGL 的 Javascript 3D 绘图引擎。",
							proLink:"https://alibaba.github.io/G3D/"
						},
						{
							proName:"Weex",
							proDesc:"跨平台移动开发工具",
							proLink:"https://github.com/apache/incubator-weex/"
						},
						{
							proName:"Weex Ui",
							proDesc:"基于 Weex 的 UI 组件库。",
							proLink:"https://github.com/apache/incubator-weex-ui"
						},
						{
							proName:"Hilo ",
							proDesc:"HTML5 互动游戏引擎。这个项目可以帮助开发者快速创建HTML5游戏。",
							proLink:"https://github.com/hiloteam/Hilo"
						},
						{
							proName:"Mock.js",
							proDesc:"模拟数据生成器，帮助前端开发者独立于后端进行开发，帮助编写单元测试。",
							proLink:"https://github.com/nuysoft/Mock"
						}
					]
				}
			]
		},
		{
			titleName:"优质公开课",
			content:[
				{
					subtitle:"北京大学",
					resource:[
						{
							proName:"北京大学",
							proDesc:"",
							proLink:"https://github.com/lib-pku/libpku"
						},
						
					]
				},
				{
					subtitle:"清华大学",
					resource:[
						{
							proName:"清华大学计算机系课程攻略",
							proDesc:"",
							proLink:"https://github.com/PKUanonym/REKCARC-TSC-UHT"
						},
						
					]
				},
				{
					subtitle:"浙江大学",
					resource:[
						{
							proName:"浙江大学课程攻略共享计划",
							proDesc:"",
							proLink:"https://github.com/QSCTech/zju-icicles"
						},
						
					]
				},
				{
					subtitle:"中国科学技术大学",
					resource:[
						{
							proName:"中国科学技术大学课程资源",
							proDesc:"",
							proLink:"https://github.com/USTC-Resource/USTC-Course"
						},
						
					]
				},
				{
					subtitle:"中山大学",
					resource:[
						{
							proName:"中山大学",
							proDesc:"",
							proLink:"https://github.com/sysuexam/SYSU-Exam"
						},
						
					]
				},
				
			]
		},
		{
			titleName:"开发者工具",
			content:[
				{
					subtitle:"编辑器",
					resource:[
						{
							proName:"Atom",
							proDesc:"GitHub 推出的开源编辑器",
							proLink:"https://atom.io/"
						},
						{
							proName:"Android Studio ",
							proDesc:"Android 的官方 IDE，基于 Intellij IDEA。",
							proLink:"https://developer.android.com/studio"
						},
						{
							proName:"Atom",
							proDesc:"GitHub 推出的开源编辑器",
							proLink:"https://atom.io/"
						},
						{
							proName:"Eclipse",
							proDesc:"流行的开源 IDE，主要用于 Java，也为多种语言提供插件支持。",
							proLink:"https://www.eclipse.org/"
						},
						{
							proName:"Sublime Text",
							proDesc:" 一个比较简洁大方带插件管理系统的流行编辑器",
							proLink:"http://www.sublimetext.com/3"
						},
						{
							proName:"HBuilder",
							proDesc:" HBuilder 是 DCloud（数字天堂）推出的一款支持 HTML5 的 Web 开发 IDE。",
							proLink:"https://www.dcloud.io/index.html"
						},
						{
							proName:"Visual Studio Code ",
							proDesc:" 微软推出的免费/开源编辑器，TypeScript 支持杠杠的",
							proLink:"https://code.visualstudio.com/"
						},
						{
							proName:"IntelliJ IDEA",
							proDesc:" 一款 Java 开发集成环境。",
							proLink:"https://www.jetbrains.com/idea/"
						},
						{
							proName:"Webstorm",
							proDesc:" 是 JetBrains 公司旗下一款 JavaScript 开发工具。",
							proLink:"https://www.jetbrains.com/webstorm/"
						},
						{
							proName:"Vimr",
							proDesc:"Vim 客户端，升级 Vim 体验。",
							proLink:"https://github.com/qvacua/vimr"
						},
						
					]
				},
				{
					subtitle:"实用工具",
					resource:[
						{
							proName:"BetterRename",
							proDesc:"一款强大的批量重命名工具，可以通过搜索功能改名。",
							proLink:"https://www.publicspace.net/BetterRename/"
						},
						{
							proName:"CodeKit",
							proDesc:"自动编译 Less、Sass、Stylus、CoffeeScript、Jade & Haml等文件。",
							proLink:"https://codekitapp.com/"
						},
						{
							proName:"Dash",
							proDesc:"强大到你无法想象的 API 离线文档软件。",
							proLink:"https://kapeli.com/dash"
						},
						{
							proName:"Kaleidoscope",
							proDesc:"一款很强大的文本文件和图像比较工具，同时和 git、svn 等版本控制工具能够完美的结合。",
							proLink:"https://kaleidoscope.app/"
						},
						{
							proName:"PPRows",
							proDesc:"计算你写了多少行代码。",
							proLink:"https://github.com/jkpang/PPRows"
						},
						{
							proName:"SnippetsLab",
							proDesc:"管理和组织你的代码片段。",
							proLink:"https://www.renfei.org/snippets-lab/"
						},
						{
							proName:"StarUML",
							proDesc:"强大的软件建模软件.",
							proLink:"https://staruml.io/",
						},
						{
							proName:"uTools",
							proDesc:"一款基于插件的程序员效率工具，包含非常多的实用插件，如图床、UUID、密码、翻译、JSON格式化等。",
							proLink:"https://u.tools/",
						},
						{
							proName:"zeplin ",
							proDesc:"前端与设计协同工作专用工具。",
							proLink:"https://zeplin.io/",
						},
					]
				},
				{
					subtitle:"API开发和分析",
					resource:[
						{
							proName:"Cocoa Rest Client",
							proDesc:"比 Postman 看起来漂亮的客户端，测试 HTTP/REST endpoints。",
							proLink:"https://mmattozzi.github.io/cocoa-rest-client/",
						},
						{
							proName:"Insomnia",
							proDesc:"最直观的跨平台 REST API 客户端。",
							proLink:"https://insomnia.rest/",
						},
						{
							proName:"Postman",
							proDesc:"Postman 帮助我们快速测试 API。",
							proLink:"https://www.postman.com/",
						},
						{
							proName:"Katalon Studio",
							proDesc:"简单开放性测试前端开放工具,网页,手机应用等客户端。可以使用在不同的浏览器",
							proLink:"https://katalon.com/",
						},
					]
				},
				{
					subtitle:"网络分析",
					resource:[
						{
							proName:"Charles",
							proDesc:"一个代理工具，允许你查看所有的 HTTP 和 HTTPS 流量。",
							proLink:"https://www.charlesproxy.com/"
						},
						{
							proName:"mitmproxy",
							proDesc:" 一款支持 HTTP(S) 的中间人代理工具，可在终端下运行，可用于抓包。",
							proLink:"https://mitmproxy.org//"
						},
						{
							proName:"Paw",
							proDesc:"先进的HTTP客户端。",
							proLink:"https://paw.cloud/"
						},
						{
							proName:"Wireshark",
							proDesc:"世界上最广泛使用的网络协议分析软件。",
							proLink:"https://www.wireshark.org/"
						},
						
					]
				},
				{
					subtitle:"GUI",
					resource:[
						{
							proName:"Gitbar",
							proDesc:"开源，在你的菜单栏上显示 GitHub 贡献统计。",
							proLink:"https://github.com/Shikkic/gitbar"
						},
						{
							proName:"GitHub Desktop",
							proDesc:"使用 GitHub 的 GUI 应用。",
							proLink:"https://desktop.github.com/"
						},
						{
							proName:"Hub",
							proDesc:"将 GitHub 接口和 Git 命令进行包装。",
							proLink:"https://hub.github.com/"
						},
						{
							proName:"OhMyStar",
							proDesc:"最好的组织 Github Star 的软件。",
							proLink:"https://ohmystarapp.com/"
						},
						{
							proName:"SourceTree ",
							proDesc:"强大的 Git 跨平台客户端。",
							proLink:"https://www.sourcetreeapp.com/"
						},
						{
							proName:"Sublime Merge",
							proDesc:"Git客户端，来自Sublime Text的制造商。",
							proLink:"https://www.sublimemerge.com/"
						},
					]
				},
				
			]
		},
    {
      titleName:"开源工具",
      content:[
        {
          subtitle:"好用工具",
          resource:[
            {
              proName:"gitignore",
              proDesc:"提供很多 .gitignore 模板。",
              proLink:"https://github.com/github/gitignore"
            },{
              proName:"carbon",
              proDesc:"将源码转化为漂亮的图片，插入到博客就非常美观。",
              proLink:"https://github.com/carbon-app/carbon"
            },{
              proName:"fusuma",
              proDesc:"通过编写 Markdown 来快速生成演讲幻灯片。",
              proLink:"https://github.com/hiroppy/fusuma"
            },{
              proName:"Motrix",
              proDesc:"Motrix 是一款全能的下载工具，图形操作界面简单明了",
              proLink:"https://github.com/agalwood/Motrix"
            },{
              proName:"jeecg-boot",
              proDesc:"基于 Spring Boot + Mybatis + Vue 的代码生成器。",
              proLink:"https://github.com/jeecgboot/jeecg-boot"
            },{
              proName:"Hutool",
              proDesc:"一款小而全的 Java 工具类库：Hutool。",
              proLink:"https://github.com/dromara/hutool"
            },{
              proName:"ChromeAppHeroes",
              proDesc:"为优秀的 Chrome 插件写一本中文说明书, 让 Chrome 插件英雄们造福人类。",
              proLink:"https://github.com/zhaoolee/ChromeAppHeroes"
            },{
              proName:"heti",
              proDesc:"一个中文排版开源项目。",
              proLink:"https://github.com/sivan/heti"
            },{
              proName:"Notable",
              proDesc:"一款开源的高颜值、跨平台的 Markdown 编辑器。",
              proLink:"https://github.com/notable/notable"
            },{
              proName:"codelf",
              proDesc:"一个帮助开发者解决变量命名烦恼的工具: CodeIf。",
              proLink:"https://github.com/unbug/codelf"
            },{
              proName:"annie",
              proDesc:"一键下载全网视频。",
              proLink:"https://github.com/iawia002/lux"
            },
          ]
        },
        {
          subtitle:"效率工具",
          resource:[
            {
              proName:"github1s",
              proDesc:"直接用 VS Code 方式打开 GitHub 代码的工具。",
              proLink:"https://github.com/conwnet/github1s"
            },{
              proName:"wox",
              proDesc:"一款国产开源免费的软件快捷启动工具。",
              proLink:"https://github.com/Wox-launcher/Wox"
            },{
              proName:"APIJSON",
              proDesc:"是一种专为 API 而生的 JSON 网络传输协议 以及 基于这套协议实现的 ORM 库。",
              proLink:"https://github.com/Tencent/APIJSON"
            },
          ]
        },
      ]
    },
	]
	export default {
    data() {
      return {
        tabPosition: 'left',
		    project
      };
    }
  };
</script>

<style scoped>
	.learn{
		width: 1300px;
		margin: 20px auto;
	}
	.back{
		width: 100px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		cursor: pointer;
		border-radius: 5px;
		background-color: #f37135;
	}
	.ready{
		color: #ffffff;
		font-size: 15px;
	}
	.tabs{
		margin-left: 20px;
	}
	.project{
		margin-left:20px ;
	}
	.titleName{
		font-size: 30px;
		margin: 5px 0 20px;
	}
	.content{
		padding-left: 20px;
		margin-top: 40px;
		/* border-left: 10px solid #8de6a6; */
	}
	.subtitle{
		height: 50px;
		width: 200px;
		color: #4F4F4FEF;
		padding: 0 10px;
		text-align: center;
		line-height: 50px;
		font-size: 22px;
		font-weight: 600;
		margin: 10px 0 20px;
		background-color: #7ad4ece1;
		border-radius: 5px;
	}
	.resource{
		margin-top: 20px;
		padding-left: 15px;
		height: 35px;
		line-height: 35px;
    overflow: hidden;
	}
	.proName{
		color: #4cc96f;
		font-weight: 600;
		font-size: 22px;
	}
	.proName:hover{
		text-decoration:3px #2ac154 underline;
	}
	.proDesc{
		color: #6b6a6a;
		font-size: 15px;
		margin-left: 40px;
    line-height: 40px;
  }
	h1{
		width: 600px;
		height: 200px;
		line-height: 200px;
		text-align: center;
		margin: 10px auto 30px;
		color: #17eb49;
		background-color: #89a9c1;
		border-radius: 10px;
		
	}
</style>
